<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jq_demo1</title>
  <style type="text/css">
    #panel,#flip{
      padding: 5px;
      text-align: center;
      background-color: #e5eecc;
      border: solid 1px #c3c3c3;
    }
    #panel{
      padding: 50px;
      display: none;
    }
  </style>
<!--  <style type="text/css">-->
<!--    div.panel, p.flip {-->
<!--      margin: 0px;-->
<!--      padding: 5px;-->
<!--      text-align: center;-->
<!--      background: #e5eecc;-->
<!--      border: solid 1px #c3c3c3;-->
<!--    }-->

<!--    div.panel {-->
<!--      height: 120px;-->
<!--      display: none;-->
<!--    }-->
<!--  </style>-->
  <script type="text/javascript" src="https://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
  <script src="./my_jquery_functions.js"></script>
  <!--  <script type="text/javascript">-->
  <!--    $(document).ready(function () {-->
  <!--      $("button").click(function () {-->
  <!--        // 隐藏所有p元素-->
  <!--        // $("p").hide();-->
  <!--        // 将所有的p 元素改变背景颜色为红色-->
  <!--        $("p").css("background-color", "red");-->
  <!--      });-->
  <!--    });-->
  <!--  </script>-->
</head>
<!--
jQuery 是一个js库,是一个写的更少,但做的更多的轻量级 js库
jQuery 库可以通过一行简单的标记被添加到网页中
jQuery 库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
js 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
下载 jQuery 版本 https://jquery.com/download/

使用Google 的CDN服务器
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用 Microsoft 的CDN服务器
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.min.js"></script>

在 HTML5 中 就不必再使用 <script>标签中使用 type="text/javascript"  js是HTML5 现代浏览器中的默认脚本语言
有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

通过 jQuery ,可以选取 查询 query  HTML元素 并对它们执行操作 action

jq 语法实例
$ (this).hide() 隐藏当前的HTML元素
$ ("#test").hide() 隐藏id为test的HTML元素
$ ("p").hide() 隐藏所有p元素
$ (".test").hide() 隐藏所有 class = "test"的元素

jQuery 语法 是为 html 元素的选取编制的 可以对元素执行某些操作

基础语法 $ (select).action()
美元符号定义 jQuery 函数
选择器 select 查询和查找 html 元素
jQuery 的 action() 执行对元素的操作

$ (this).hide() 隐藏当前元素
$ ("p").hide() 隐藏所有p元素
$ (".test").hide() 隐藏所有 class = "test"的元素
$ ("#test").hide() 隐藏id为test的HTML元素

文档就绪函数
所有的 jQuery 函数 位于一个 doucument.ready() 函数中,
$ (document).ready(function(){});
为了防止文档在完全加载就绪 之前运行 jQuery 代码, 如果在文档没有完全加载之前就运行函数 ,操作可能失败

jQuery 选择器  选择器允许对元素组或单个元素进行操作
jQuery 元素选择器和属性选择器允许您通过标签名,属性名或内容对HTML元素进行选择

jQuery 元素选择器 使用css选择器来选取HTML 元素
$("p") 选取p元素
$("p.intro") 选取class="intro"的p元素
$("p#demo") 选取所有id="demo"的p元素

jQuery 属性选择器 使用css选择器来选取HTML 元素
jQuery 使用xpath 表达式来选择带有给定属性的元素
$("[href]") 选取带有href属性的元素
$("[href='#']") 选取带有href值为#的元素
$("[href!='#']") 选取带有href属性但不是#的元素
$("[href$='.jpg']") 选取href属性以.jpg结尾的元素

css选取器可用于改变HTML元素 的css 属性
$(this)  当前HTML 元素
$("p")   所有的p元素
$("p.intro")   所有class="intro"的p元素
$(".intro") 所有class="intro"的元素
$("#intro") 所有id="intro"的元素
$("ul li:first")  每个ul 元素的第一个li元素
$("[href$='jpg']") 所有带有以 .jpg结尾的属性值的href属性
$("div#intro.head") id="intro" 和 class="head"的div元素

jQuery 事件函数 事件处理方法是jQuery 中的核心函数
事件处理处理程序指的是当HTML 中发生某些事件时所调用的方法 由事件触发 或 激发 经常会被使用

单独文件中的函数
在 教程中演示 jQuery 时 会将函数直接添加到 head 部分中 可以将函数放在单独文件中

jQuery 名称冲突
jQuery 使用$符号 作为jQuery 的简介方式
jQuery 使用名为 noConflict() 的方法来解决该问题
var jq = jQuery.noConflict(); 帮助使用自己的名称 比如jq 来代替 $符号

结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

jQuery 事件
$(document).ready(function)	  将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	  触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	  触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	    触发或将函数绑定到被选元素的鼠标悬停事件


隐藏 显示 切换 滑动  淡入淡出 动画
$(selector).hide(speed,callback);
speed 参数规定隐藏显示的速度,可以取以下毫秒值
通过 jQuery 可以使用 toggle() 方法来切换隐藏和显示元素
$(selector).toggle(speed,callback);
callback 参数是toggle 方法完成后所执行的函数名称

jQuery 效果 淡入淡出
jQuery 拥有四种 fade 方法
fadeIn() 方法用于淡入被选元素
  $(selector).fadeIn(speed,callback);
fadeOut() 方法用于淡出被选元素
fadeToggle() 方法用于切换(显示/隐藏)被选元素
fadeTo() 方法用于设置被选元素的不透明度(透明度值介于0和1之间)
jQuery fadeOut() 方法用于淡出被选元素
$(selector).fadeOut(speed,callback);
jQuery fadeToggle() 方法用于切换(显示/隐藏)被选元素
jQuery fadeTo() 方法用于设置被选元素的不透明度(透明度值介于0和1之间)

jQuery 滑动 可使元素上下滑动
jQuery slideDown() 方法用于滑入被选元素
$(selector).slideDown(speed,callback);
jQuery slideUp() 方法用于滑出被选元素
$(selector).slideUp(speed,callback);
jQuery slideToggle() 方法用于切换(滑入/滑出)被选元素
$(selector).slideToggle(speed,callback);
jQuery 显示隐藏 切换

jQuery 动画 animate() 方法用于执行自定义动画
$(selector).animate({params},speed,easing,callback);
默认地 所有HTML 元素都有一个静态位置 ,且无法移动
操作多个属性
当使用 animate() 时,必须使用Camel 标记法书写所有的属性名
比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

使用相对值
也可以定义相对值 该值相对于元素的当前值. 需要在值的前面加上 += 或 -=

jQuery stop() 方法 用于停止动画或效果
$(selector).stop(stopAll,gotoEnd);

Callback 函数 在当前动画 100% 完成之后执行
许多jQuery 方法都有回调函数,这些函数 会将speed duration 作为可选参数
由于 js语句是逐一执行的-按照次序 动画之后的语句可能会产生错误或页面冲突 因为动画还没有完成,为了避免情况 以参数的形式添加callback 函数

jQuery Callback 函数在动画100%完成后 调用Callback函数
$(selector).hide(speed,callback)
在动画的函数执行后使用 callback函数

通过 jQuery 可以把动作/方法 链接起来 chaining 允许我们在一条语句中允许多个jQuery 方法
有一种名为链接的技术 允许我们在相同的元素上运行多条jQuery 方法

jQuery 获取内容和属性 拥有可操作的HTML 元素和属性的强大方法
jQuery 提供一系列与Dom 相关的方法 这使访问和操作元素和属性变的很容易

获得内容 text(),html()以及val()方法
三个简单实用的用于Dom操作的jQuery 方法
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容
val() 设置或返回被选元素的值


设置内容 text(),html()以及val()方法
回调函数 由两个参数: 被选元素列表中当前元素的下标 以及原始旧的值 然后以函数新值返回 希望使用的字符串
设置 attr() 方法用于设置/改变属性值

通过 jQuery 可以添加新元素/内容
添加新的HTML 内容
append() 方法用于在选定元素的结尾插入内容
prepend() 方法用于在选定元素的开头插入内容
after() 方法用于在选定元素的结尾插入内容
before() 方法用于在选定元素的开头插入内容



-->
<body>
<p>This is a paragraph. </p>
<!--<p>This is another paragraph. </p>-->
<!--<ol>-->
<!--  <li>List item 1</li>-->
<!--  <li>List item 2</li>-->
<!--  <li>List item 3</li>-->
<!--</ol>-->
<!--<button id="btn1">追加文本</button>-->
<!--<button id="btn2">追加列表项</button>-->

<button onclick="appendText()">追加文本</button>

<img src="https://www.w3school.com.cn/i/eg_w3school.gif" alt="w3school Logo"/>
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片前面添加文本</button>

<!--<h5>jQuery 的hide() 函数,隐藏了HTML文档中所有的p元素</h5>-->
<!--<p>如果点击我,我会消失.</p>-->
<!--<p>点击我,我会消失.</p>-->
<!--<p>也会点击我</p>-->
<!--<button type="button">Click me</button>-->
<!--<p id="p1">如果点击"隐藏"按钮,我就会消失</p>-->
<!--<button id="hide" type="button">隐藏</button>-->
<!--<button id="show" type="button">显示</button>-->
<!--<button type="button">切换</button>-->
<!--<p>演示带有不同参数的 fadeIn() 方法</p>-->
<!--<button>点击这里,使三个矩形淡入</button>-->
<!--<br><br>-->
<!--<div id="div1" style="width: 80px;height: 80px;background-color: red;"></div>-->
<!--<div id="div2" style="width: 80px;height: 80px;background-color: green;"></div>-->
<!--<div id="div3" style="width: 80px;height: 80px;background-color: blue;"></div>-->
<!--<div class="panel">-->
<!--  <p>领先的web技术站点</p>-->
<!--  <p>所有的web技术站点</p>-->
<!--</div>-->
<!--<p class="flip">请点击这里</p>-->

<!--<button>开始动画</button>-->
<!--<p>默认情况下,所有的HTML 元素的位置都是静态的,并且无法移动,如需对未知进行操作,记得将css position 属性设置为relative,absolute或fixed.</p>-->
<!--<div style="background: #98bf21; height: 100px;width: 200px;position: absolute;">HELLO</div>-->

<!--<button id="stop">停止滑动</button>-->
<!--<div id="flip">点击这里,向下滑动面板</div>-->
<!--<div id="panel">Hello,world!</div>-->

<!--<button type="button">隐藏</button>-->
<!--<p>这个是一个段落</p>-->
<!--<p>这是另一个段落</p>-->

<!--<p id="p1">jQuery 乐趣十足</p>-->
<!--<button>点击这里</button>-->

<!--<p id="test">这是段落中的<b>粗体</b>文本</p>-->
<!--<button id="btn1">显示文本</button>-->
<!--<button id="btn2">显示 HTML</button>-->

<!--<p>姓名: <input type="text" id="test" value="米老鼠"></p>-->
<!--<button>显示值</button>-->

<!--<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>-->
<!--<button>显示 href 值</button>-->

<!--<p id="test1">这是段落</p>-->
<!--<p id="test2">这是另一个段落</p>-->
<!--<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>-->
<!--<button id="btn1">设置文本</button>-->
<!--<button id="btn2">设置HTML</button>-->
<!--<button id="btn3">设置值</button>-->

<!--<p id="test1">这是<b>粗体</b>文本.</p>-->
<!--<p id="test2">这是另一段<b>粗体</b>文本.</p>-->
<!--<button id="btn1">显示旧/新文本</button>-->
<!--<button id="btn2">显示旧/新 HTML</button>-->

<!--<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>-->
<!--<button>改变 href值和 title值</button>-->
<!--<p>请把鼠标指针移动到链接上,或点击该链接,来查看已经改变的href值.</p>-->

</body>
</html>
